<template>
    <!-- 用户-用户分组 -->
        <div>
            <Card :bordered="false" dis-hover class="ivu-mt">
                <div class="new_card_pd">
                    <Form
                            ref="groupFrom"
                            inline
                            :model="groupFrom"
                            :label-width="labelWidth"
                            :label-position="labelPosition"
                            @submit.native.prevent
                    >
                    
                        <FormItem label="角色：">
                            <Select
                                    v-model="groupFrom.role_id"
                                    placeholder="请选择"
                                    clearable
                                    class="input-add"
                                    @on-change="operationSearchs"
                            >
                                <Option v-for="(item,index) in role_list" :value="item.type">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="门店：">
                            <Select
                                    v-model="groupFrom.store_id"
                                    placeholder="请选择"
                                    clearable
                                    class="input-add"
                                    @on-change="operationSearchs"
                            >
                                <Option v-for="(item,index) in store_list" :value="item.id">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="姓名：">
                            <Input
                                    v-model="groupFrom.name"
                                    placeholder="请输入姓名手机号"
                                    class="input-add mr14"
                            />
                            <Button class="mr14" @click="operationSearchs" type="primary">查询</Button>
                            <Button @click="reset">重置</Button>
                        </FormItem>
                    </Form>           
                </div>
            </Card>
            <Card :bordered="false" dis-hover class="ivu-mt">
              
           
                <!-- 用户分组表格 -->
                <Table :columns="columns1" :data="groupLists" ref="table" class="mt25"
                       :loading="loading" highlight-row
                       no-userFrom-text="暂无数据"
                       no-filtered-userFrom-text="暂无筛选结果">
                    <template slot-scope="{ row, index }" slot="icons">
                        <viewer>
                            <div class="tabBox_img">
                                <img v-lazy="row.icon">
                            </div>
                        </viewer>
                    </template>
                    <template slot-scope="{ row, index }" slot="wedding_user">
                        <div>
                            <div>{{row.wedding_user}}</div>
                            <div>{{row.wedding_phone}}</div>
                        </div>
                    </template>

                    <template slot-scope="{ row, index }" slot="process_status">
                        <Tag color="success">
                            {{row.process_status}}
                        </Tag>
                      
                    </template>

                    <template slot-scope="{ row, index }" slot="contract_url">
                        <a color="blue" target="_blank" v-if="row.contract_url" :href="row.contract_url">合同链接</a>
                    </template>
                    
                    
                    <template slot-scope="{ row, index }" slot="avatar_url">
                        <img :src="row.avatar_url" style="width: 50px;height:50px;border-radius:50%" alt="">
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                        <a @click="view_detail(row.id)">详情</a>
                    </template>
                </Table>
                <div class="acea-row row-right page">
                    <Page :total="total" show-elevator show-total @on-change="pageChange"
                          :page-size="groupFrom.limit"/>
                </div>
            </Card>

            <Modal
                v-model="detail_model"
                title="订单详情"
                :closable="true"
                scrollable
                width="1000"
                :mask-closable="true"
                :footer-hide="true"
                >
                <detail  :id="order_id" @close="detail_model=true"></detail>
            </Modal>
        </div>
    </template>
    
    <script>
        import { mapState } from 'vuex';
        import { userGroupApi, groupAddApi } from '@/api/user';
        import { operationList, addApi ,editApi,get_store_list,get_role_list} from '@/api/operation';
        import detail from "./detail";
        import { orderList} from '@/api/wedding_order';
        export default {
            name: "wedding_order_list",
            components: {
                detail
            },
            data() {
                return {
                    order_id:0,
                    grid: {
                        xl: 7,
                        lg: 7,
                        md: 12,
                        sm: 24,
                        xs: 24
                    },
                    detail_model : false,
                    loading: false,
                    columns1: [
                        {
                            title: 'ID',
                            key: 'id',
                            width: 80
                        },
                        {
                            title: '订单编号',
                            key: 'order_sn',
                            minWidth: 150
                        },
                        {
                            title: '客户',
                            slot: 'wedding_user',
                            key: 'wedding_user',
                            minWidth: 200
                        },
                        {
                            title: '策划',
                            key: 'planner_name',
                            minWidth: 150
                        },
                        {
                            title: '婚礼日期',
                            key: 'wedding_date',
                            minWidth: 150
                        },
                        {
                            title: '婚礼地点',
                            key: 'wedding_address',
                            minWidth: 150
                        },
                        {
                            title: '总金额',
                            key: 'total_price',
                            minWidth: 150
                        },
                        {
                            title: '婚礼合同',
                            slot: 'contract_url',
                            key: 'contract_url',
                            minWidth: 200
                        },
                        {
                            title: '婚礼进度',
                            slot: 'process_status',
                            key: 'process_status',
                            minWidth: 200
                        },
                        {
                            title: '状态',
                            key: 'status_text',
                            minWidth: 150
                        },
                        {
                            title: '创建时间',
                            key: 'create_time',
                            minWidth: 150
                        },
                        {
                            title: '门店',
                            key: 'store_name',
                            minWidth: 200
                        },
                       
                        {
                            title: '操作',
                            slot: 'action',
                            fixed: 'right',
                            minWidth: 120,
                            maxWidth: 140
                        }
                    ],
                    groupFrom: {
                        page: 1,
                        limit: 10,
                        role_id:'',
                        store_id:''
                    },
                    groupLists: [],
                    store_list : [],
                    role_list : [],
                    total:0
                }
            },
            computed: {
                ...mapState('admin/layout', [
                    'isMobile'
                ]),
                labelWidth () {
                    return this.isMobile ? undefined : 75;
                },
                labelPosition () {
                    return this.isMobile ? 'top' : 'left';
                }
            },
            created () {
                this.getList();
                this.init_data();
            },
            methods:{
                view_detail(id){
                    this.detail_model = true
                    this.order_id = id
                },
                init_data(){
                  get_store_list().then(res=>{
                      this.store_list = res.data
                  })
                  get_role_list().then(res=>{
                      this.role_list = res.data
                  })
                },
             
                // 列表
                getList () {
                    this.loading = true;
                    orderList(this.groupFrom).then(async res => {
                        let data = res.data;
                        this.groupLists = data.list;
                        this.total = data.count;
                        this.loading = false;
                    }).catch(res => {
                        this.loading = false;
                        this.$Message.error(res.msg);
                    })
                },
                pageChange (index) {
                    this.groupFrom.page = index;
                    this.getList();
                },
                operationSearchs(){
                  this.groupFrom.page = 1;
                  this.getList();
              },
              reset(){
                  this.formValidate = {
                    page: 1,
                    limit: 20,
                    name:'',
                    store_id:'',
                    role_id:''
                  };
                  this.getList();
              },
                //修改
                edit(id){
                    this.$modalForm(editApi(id)).then(() => this.getList());
                },
                // 删除
                del (row, tit, num) {
                    let delfromData = {
                        title: tit,
                        num: num,
                        url: `user/operation/delete/${row.id}`,
                        method: 'DELETE',
                        ids: ''
                    };
                    this.$modalSure(delfromData).then((res) => {
                        this.$Message.success(res.msg);
                        this.groupLists.splice(num, 1);
                        if (!this.groupLists.length) {
                          this.groupFrom.page =
                              this.groupFrom.page == 1 ? 1 : this.groupFrom.page - 1;
                        }
                        this.getList();
                    }).catch(res => {
                        this.$Message.error(res.msg);
                    });
                },
            }
        }
    </script>